
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 200px;
        height: 100px;
        background-color: pink;
    }
</style>
<body>
    <p>账号:<input type="text"></p>
    <p>密码:<input type="password"></p>
    <button class="btn">登录</button>
    <div class="box">
        <p>欢迎你登录成功</p>
    </div>
    <script>
        var btn1 = document.querySelector(".btn1")
        var inp = document.querySelectorAll("input")
        btn1.onclick = function(){
            localStorage.setItem("name",inp[0].value)
            localStorage.setItem("pwd",inp[1].value)
        }
        // 登录按键
        var btn = document.querySelector("btn")
        btn.onclick=function(){
            // 获取到相应注册的账号和密码
            var name1 = localStorage.getItem("name")
            var pwd1 = localStorage.getItem("pwd")
            // 判断
            if(inp[0].value == name1 & inp[1].value == pwd1){
                alert("登录成功")
                // 登录成功就显示出来
                box.style.display = "block"
            }else{
                alert("账号错误")
            }
        }
        var btn2 = document.querySelector(".btn2")
        btn2.onclick = function(){
            localStorage.setItem("flag",false)
            if(localStorage.getItem("flag") == "false"){
                box.style.display = "none"
            }
        }
    </script>
</body>
</html>